# Component: Shop Stock

Dynamic inventory status indicator with threshold logic

Ecommerce Atom

### BEM Anatomy

| Type      | Class Name                           | Description                                                                                                            |
| --------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-shop-stock`                     | The core wrapper for stock messaging. Supports an `@OuterClass` for contextual positioning.                            |
| Element   | `__label`                            | The primary text container. Manages icon spacing and standardized font styles.                                         |
| Modifier  | `__label--in-stock`                  | Applies `var(--bs-success)` to indicate immediate availability.                                                        |
| Modifier  | `__label--out-of-stock`              | Applies `var(--bs-danger)` to indicate item is unavailable.                                                            |
| Modifier  | `__label--backorder`                 | Used for items available for future delivery; shares a warning/danger color palette.                                   |
| Element   | `__tracking-show-no-quantity`        | Displayed when stock tracking is enabled but the specific count is hidden; shows generic "In Stock" or "Limited" text. |
| Element   | `__tracking-show-quantity-remaining` | Displays the exact numerical stock count (e.g., "Only 3 left in stock").                                               |
| Element   | `__empty`                            | A fallback state used when stock data is missing or hasn't loaded yet, preventing the UI from collapsing.              |

### Inventory Display Logic

The component evaluates whether `StockTracking` is enabled. If active, it switches between quantity-based display formats (Show No Quantity, Show Remaining, or Show Only if Low). If tracking is disabled, it falls back to explicit `StockStatusType` enums.

##### Generated HTML (Low Stock State)

```html
<div class="as-shop-stock">
    <div class="as-shop-stock__label as-shop-stock__label--in-stock">
        <i class="fa-solid fa-circle-check"></i>
        <span>In Stock</span>
        <span>(only 3)</span>
    </div>
</div>
```

##### SCSS

```scss
.as-shop-stock {
  &__label {
    // Icon and text alignment
    i { margin-right: 0.25rem; }
    span { margin-left: 0.25rem; }

    &--in-stock {
      color: var(--bs-success);
    }
    
    &--out-of-stock, 
    &--backorder {
      color: var(--bs-danger);
    }
  }
}
```
